<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/performanceManage.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3911564_diiqwk5gg38.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
</head>

<body>
    <div class="content">
        <div class="performanceHeader">
            <div class="depTitle"><span>&nbsp;</span>业绩目标</div>
            <div class="depTitleBtn">
                <button><span class="iconfont icon-daoru"></span>导入</button>
                <button><span class="iconfont icon-export"></span>导出</button>
                <button><span class="iconfont icon-shuaxin"></span>刷新</button>
            </div>
        </div>
        <div class="performanceBody">
            <div class="dbsSel">
                <div class="dbsSelTitle"><span class="iconfont icon-sousuoxiao"></span><span>筛选查询</span></div>
                <div class="dbsSelSearch">
                    <span>年度：
                        <select name="oYear" id="">
                            <option value="2023">2023</option>
                            <option value="2022">2022</option>
                            <option value="2021">2021</option>
                            <option value="2020">2020</option>
                            <option value="2019">2019</option>
                        </select>
                    </span>
                    <span>部门名称：<input type="text" name="" id="depNameInput"></span>
                    <span>负责人：<input type="text" name="" id="depPersonInput"></span>
                    <button id="selBtn">查询</button>
                    <button id="resetBtn">重置</button>
                </div>
            </div>
            <div class="dataList">
                <!-- 数据表格header -->
                <div class="dataListTitle">
                    <div><span class="iconfont icon-liebiao"></span>数据列表</div>
                    <div><button data-target="#pfmAddModal" data-toggle="modal" id="addBtn" class="newAdd">新增</button>
                    </div>
                </div>
                <!-- 数据表格 -->
                <div>
                    <table class="table table-bordered" id="table">
                        <thead>
                            <tr>
                                <th>姓名</th>
                                <th>部门</th>
                                <th>年度</th>
                                <th>年度目标（万元）</th>
                                <th>第一季度（万元）</th>
                                <th>第二季度（万元）</th>
                                <th>第三季度（万元）</th>
                                <th>第四季度（万元）</th>
                                <th>备注</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="depTable">

                        </tbody>
                    </table>
                </div>
                <!-- 页码 -->
            </div>
            <div class="pageNum">
                <ul class="pagination">

                </ul>
            </div>
        </div>
    </div>
    <!-- <button class="initBtn">init</button> -->
    <!-- addModal -->
    <div class="modal fade" id="pfmAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新增</h4>
                </div>
                <div class="modal-body">
                    <table id="modalTable">
                        <tr>
                            <td>
                                <span>id:</span><br>
                                <input type="text" name="" id="perId" disabled>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>年度</span><br>
                                <select name="oyear" id="addoYear">
                                    <option value="2023">2023</option>
                                    <option value="2022">2022</option>
                                    <option value="2021">2021</option>
                                    <option value="2020">2020</option>
                                    <option value="2019">2019</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>姓名</span><br>
                                <input type="text" name="" id="addname">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>部门</span><br>
                                <input type="text" name="" id="adddepartmentName">
                            </td>

                        </tr>
                        <tr>
                            <td>
                                <span>年度目标（万元）</span><br>
                                <input type="text" name="" id="addKPI">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>第一季度（万元）</span><br>
                                <input type="text" name="" id="addfirstQuarter">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>第二季度（万元）</span><br>
                                <input type="text" name="" id="addsecondQuarter">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>第三季度（万元）</span><br>
                                <input type="text" name="" id="addthirdQuarter">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>第四季度（万元）</span><br>
                                <input type="text" name="" id="addforthQuarter">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span>备注</span><br>
                                <input type="text" name="" id="addremarks">
                            </td>
                        </tr>
                    </table>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-success" id="pfmsaveAddBtn">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- editModal -->
    <div class="modal fade" id="pfmEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">编辑</h4>
                </div>
                <div class="modal-body">
                    <table id="modalTable">
                    <tr>
                        <td>
                            <span>年度</span><br>
                            <select name="oyear" id="oYear">
                                <option value="2023">2023</option>
                                <option value="2022">2022</option>
                                <option value="2021">2021</option>
                                <option value="2020">2020</option>
                                <option value="2019">2019</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>姓名</span><br>
                            <input type="text" name="" id="uname">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>部门</span><br>
                            <input type="text" name="" id="udepartmentName">
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <span>年度目标（万元）</span><br>
                            <input type="text" name="" id="KPI">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>第一季度（万元）</span><br>
                            <input type="text" name="" id="firstQuarter">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>第二季度（万元）</span><br>
                            <input type="text" name="" id="secondQuarter">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>第三季度（万元）</span><br>
                            <input type="text" name="" id="thirdQuarter">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>第四季度（万元）</span><br>
                            <input type="text" name="" id="forthQuarter">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>备注</span><br>
                            <input type="text" name="" id="remarks">
                        </td>
                    </tr>
                    </table>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-success" id="pfmsaveEditBtn">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="pfmDelModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">确定删除吗？</h4>
                </div>
                <div class="modal-body">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger" id="pfmSaveDelBtn">删除</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../js/jquery-3.6.3.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/database.js"></script>
    <script src="../js/performanceManage.js"></script>
</body>

</html>